import { useRef } from "react";
import { Button, CenterPopup, Form, Input, Toast } from "antd-mobile";
import { InputRef } from "antd-mobile/es/components/input";

import styles from "components/InputPopup/style.module.scss";

interface Props {
  title: string;
  visible: boolean;
  setVisible: (visible: boolean) => void;
  content: string;
  setContent: (content: string) => void;
  submitHandle: (content: string) => void;
}

const InputPopup = ({
  title,
  visible,
  setVisible,
  content,
  setContent,
  submitHandle,
}: Props) => {
  const input = useRef<InputRef>(null);

  return (
    <CenterPopup
      visible={visible}
      onMaskClick={() => {
        setVisible(false);
      }}
    >
      <div className={styles.inputPopup}>
        <div className={styles.header}>
          <span>{title}</span>
        </div>
        <Form>
          <Form.Item>
            <Input
              name="edit"
              placeholder="请输入修改后的任务"
              autoComplete="off"
              autoFocus={true}
              value={content}
              ref={input}
              onChange={(value) => {
                setContent(value);
              }}
            />
          </Form.Item>

          <Form.Item>
            <Button
              block
              onClick={() => {
                setVisible(false);
              }}
            >
              取消
            </Button>
          </Form.Item>

          <Form.Item>
            <Button
              block
              type="submit"
              color="primary"
              onClick={() => {
                console.log("修改模态框提交的内容: ", content);
                if (content === "") {
                  Toast.show("请输入内容!");
                }
                submitHandle(content);
                setVisible(false);
              }}
            >
              提交
            </Button>
          </Form.Item>
        </Form>
      </div>
    </CenterPopup>
  );
};

export default InputPopup;
